<template>
  <div
      class="container"
      :style="{
            top: (y  + topOffset) + '%',
            left: x + '%',
            width: width + '%',
            height: height + '%',
            opacity: visible ? 1 : 0
        }"
  >

    <img src="https://comps.videohudong.com/ivimg/AF2699F61A2F6BD4D6D4B658303D8994D3022D70876D6492F5E43F098C59D99F.png">

    <p class="attr-value">+{{ count }}</p>
    <p class="attr-name">{{ attrName }}</p>

  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      topOffset: 0,   // 新增：用于控制上移距离
    };
  },
  mounted() {
    // this.show();

    // 步骤1 通知引擎在视频结束时，不要销毁当前组件
    this.$emit('interruptdestroy');

    // setTimeout(() =>{
    //   console.log('手动触发增加属性',this.vkey)
    //   const param = { expression: 'v6667953=v6667953+5' };
    //   this.bridge.invoke('engine', 'action', param);
    // },500)

    this.bridge.listenValue(this.vkey, val => {
      console.log('好感度变化了1',val,this.vkey)
      //更新数值
      this.count = val;

      //延迟显示
      setTimeout(() =>{
        this.show();
        this.topOffset = -3;
      },500)

      setTimeout(() => {
        // 步骤2 通知引擎销毁当前组件
        this.hide();
      }, 3500);
    });
  }
};
</script>
<style>

.container {
  position: absolute;
  background-size: 100% 100%;
  transition: opacity 1s,top .5s;
}



.attr-value {
  text-align: center;
  color: #FC524D;
  font-weight: bold;
  font-size: 0.5rem;
  text-stroke: 1px #FFFFFF;
  -webkit-text-stroke: 1px #FFFFFF;

  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.attr-name {
  text-align: center;
  color: white;
  font-size: 0.5rem;
  text-stroke: 0.5px #FB514D;
  -webkit-text-stroke: 0.5px #FB514D;

  position: absolute;
  top: 72%;
  left: 50%;
  transform: translate(-50%, -50%);
}

img {
  position: absolute;
  width: 1.8rem;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}


</style>
